<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card>
        <!-- v-model关联的是pane的name属性 -->
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <!-- el-tab-pane 是每一个面板  label是面板的标题 面板的内容是在pane面板中显示的-->
          <el-tab-pane label="角色管理" name="role">
            <el-button icon="el-icon-plus" size="mini" type="primary" @click="dialogVisible=true;title='新增角色'">新增角色</el-button>
            <!-- 表格 -->
            <el-table
              v-loading="loading"
              element-loading-text="拼命加载中"
              element-loading-spinner="el-icon-loading"
              element-loading-background="rgba(0, 0, 0, 0.8)"
              border
              stripe
              style="margin:20px 0"
              :data="tableData"
            >
              <!-- 列设置type="index" 可以自定义索引列, 默认是从1开始 也可以传入一个方法, 传入了方法默认是从0开始的 -->
              <el-table-column label="序号" type="index" :index="indexMethod" width="80" />
              <el-table-column label="角色名称" prop="name" />
              <el-table-column label="角色描述" prop="description" />
              <el-table-column label="操作">
                <template #default="{row}">
                  <!-- {{ row }} -->
                  <el-button type="primary" size="mini">分配权限</el-button>
                  <el-button type="warning" size="mini" @click="showRoleEdit(row.id)">修改</el-button>
                  <el-button type="danger" size="mini" @click="delRoule(row.id)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
            <!-- 分页 -->
            <!-- current-page 处于哪一页 页码
              page-sizes 下拉选择每页多少条
              page-size 每页条数
              layout 分页的布局
              total 总数
              @size-change 每页条数发生变化触发的方法 处理函数中有最新的每页条数  pagesize
              @current-change 页码发生变化触发的方法  处理函数中有最新的页码 page -->
            <el-pagination
              :current-page="queryInfo.page"
              :page-sizes="[1, 2, 3, 5]"
              :page-size="queryInfo.pagesize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
            />
          </el-tab-pane>
          <el-tab-pane label="公司信息" name="company">
            <el-form label-width="80px">
              <el-form-item label="企业名称" style="width:400px !important">
                <el-input v-model="companyInfo.name" disabled />
              </el-form-item>
              <el-form-item label="公司地址" style="width:400px !important">
                <el-input :value="companyInfo.companyAddress" disabled />
              </el-form-item>
              <el-form-item label="公司电话" style="width:400px !important">
                <el-input v-model="companyInfo.companyPhone" disabled />
              </el-form-item>
              <el-form-item label="邮箱" style="width:400px !important">
                <el-input v-model="companyInfo.mailbox" disabled />
              </el-form-item>
              <el-form-item label="备注" style="width:400px !important">
                <el-input v-model="companyInfo.remarks" disabled />
              </el-form-item>
            </el-form>
          </el-tab-pane>
        </el-tabs>
        <!-- 添加角色/编辑角色的对话框 -->
        <el-dialog
          :title="title"
          :visible.sync="dialogVisible"
          @close="closeDialog"
        >
          <!-- 表单结构 -->
          <el-form ref="formRef" :model="form" :rules="rules" label-width="80px">
            <el-form-item label="角色名称" prop="name">
              <el-input v-model="form.name" />
            </el-form-item>
            <el-form-item label="角色描述" prop="description">
              <el-input v-model="form.description" />
            </el-form-item>
          </el-form>
          <span slot="footer" class="dialog-footer">
            <el-button @click="closeDialog">取 消</el-button>
            <el-button type="primary" @click="hanldeSubmit">确 定</el-button>
          </span>
        </el-dialog>
      </el-card>
    </div>
  </div>
</template>

<script>
import { reqAddRole, reqDelRoleById, reqGetCompanyInfoById, reqGetRoleById, reqGetRolesList, reqUpdateRole } from '@/api/settings'
export default {
  name: 'Setting',
  data() {
    return {
      activeName: 'role',
      // 表格的数据
      tableData: [],
      // 角色列表总数
      total: 0,
      queryInfo: { // 查询参数
        page: 1,
        pagesize: 2
      },
      loading: false,
      dialogVisible: false,
      form: {
        name: '',
        descripon: ''
      },
      rules: {
        name: [
          { required: true, message: '角色名称不猛为空', trigger: ['blur', 'change'] }
        ],
        description: [
          { required: true, message: '角色描述不猛为空', trigger: ['blur', 'change'] }
        ]
      },
      // 对话框标题
      title: '新增角色',
      companyInfo: {}// 公司信息
    }
  },
  created() {
  // 获取所有角色列表
    this.getRolesList()
  },
  methods: {
    // tabs点击切换
    async handleClick(tab, event) {
      console.log(tab, event)// tab是处于哪个面板 event事件对象
      if (tab.label === '公司信息') {
        // console.log('获取公司信息')
        const { data } = await reqGetCompanyInfoById(this.$store.getters.companyId)
        console.log(data)
        this.companyInfo = data
      }
    },
    // 获取所有角色列表的方法
    async getRolesList() {
      this.loading = true
      const { data: { rows, total }} = await reqGetRolesList(this.queryInfo)
      this.tableData = rows
      this.total = total
      this.loading = false
    },
    // 每页条数发生变化触发的方法 处理函数中有最新的每页条数  pagesize
    handleSizeChange(newPagesize) {
      // console.log('最新每页' + pagesize)
      // 将更新后的pagesize重新发送请求
      this.queryInfo.pagesize = newPagesize
      // 优化 --- 只要修改了pagesize 从第一页开始展示数据
      this.queryInfo.page = 1
      // 调用重新获取页面的方法
      this.getRolesList()
    },
    // 页码发生变化触发的方法  处理函数中有最新的页码 page
    handleCurrentChange(newPage) {
      // console.log('最新页码是' + page)
      // 将最新的page更新后发送请求
      this.queryInfo.page = newPage
      // 调用重新获取页面的方法
      this.getRolesList()
    },
    // 自定义索引列 , 这个方法必须有返回值
    indexMethod(index) {
      // console.log(index)
      // return index + 1 + (this.queryInfo.page - 1) * this.queryInfo.pagesize
      return index + 1 + this.queryInfo.pagesize * (this.queryInfo.page - 1)
    },
    // 删除角色
    async delRoule(id) {
      // 1确认消息框
      const str = await this.$confirm('是否删除该角色, 是否继续?', '提示', {
        type: 'warning'
      }).catch(() => {})
      if (str !== 'confirm') return this.$message.info('已取消操作')
      // 2发送请求
      await reqDelRoleById(id)
      // 4. 如果tableData数组长度等于1了, 再让page--
      if (this.tableData.length === 1 && this.queryInfo.page > 1) {
        this.queryInfo.page--
      }
      // 3重新渲染
      this.getRolesList()
    },
    // 关闭对话框
    closeDialog() {
      this.dialogVisible = false// 关闭对话框
      this.$refs.formRef.resetFields()// 重置表单校验规则
    },
    // 点击确定按钮添加/编辑提交角色
    hanldeSubmit() {
      // 1.预校验
      this.$refs.formRef.validate(async boo => {
        if (!boo) return
        if (this.form.id) {
          // 编辑提交
          await reqUpdateRole(this.form)
        } else {
          // 新增提交
        // 2发送请求
          await reqAddRole(this.form)
        }
        // 3关闭对话框
        this.closeDialog()
        // 4重置表单校验规则
        this.getRolesList()
      })
    },
    // 点击编辑回显角色信息
    async showRoleEdit(id) {
      this.title = '编辑角色'
      const { data } = await reqGetRoleById(id)
      // 将角色查询的结果赋值给from回显
      this.form = data
      this.dialogVisible = true
    }

  }
}
</script>

<style>

</style>
